<div id = "sleep" class = "MenuPage" title = "[% 'SLEEP' | string %]" 
	 style = "background-color: #1A1A1A; 
			  background-image: url([% webroot %]html/images/cooliosleep1.png), url([% webroot %]html/images/sleepbg.png); 
			  background-position: 120 23, top left; 
			  background-repeat: no-repeat, repeat-x;">
			  
<script type="text/javascript">
// Sleep

Sleep = function () {
	this.timeout = 0;
	this.tid = null;
	this.element = null;
}

sleep = new Sleep();

Sleep.prototype.string = function () {
	var target = new String();
	if (this.timeout > 3600) {
		target = parseInt(this.timeout / 3600) + ":";
		if (this.timeout < 36000) target = "0" + target;
	}
	var temp = this.timeout % 3600;
	if (temp < 600) target = target + "0";
	target = target + parseInt(temp / 60) + ":";
	temp = this.timeout % 60;
	if (temp < 10) target = target + "0";
	target = target + temp;
//console.log("target2: " + target);
	return target;
}

Sleep.prototype.displayStartStop = function (startflag) {
 		if (startflag) {
			Element.show('sleeptime');
			Element.hide('sleepedit');
			Element.show('sleepstop');
			Element.hide('sleepstart');
		} else {
			Element.hide('sleeptime');
			Element.show('sleepedit');
			Element.hide('sleepstop');
			Element.show('sleepstart');
		}
}

Sleep.prototype.init = function() {
console.log("init");
 	var sthis = this;
	var sArray = [ 'sleep', '?' ];
	if (!this.element) this.element = $('sleeptime');
	callJSONRPC (sArray, function (r2) {
	 	var restemp = parseInt(r2.result._sleep);
		if (restemp > 0) {
			sthis.timeout = restemp;
			sthis.displayStartStop (true);
			if (!sthis.tid)
				sthis.tid = setInterval(dodisplayTime, 1000);
		} else {
			sthis.timeout = 0;
			sthis.displayStartStop(false);
		}
	});
	
	function dodisplayTime() {
		sleep.displayTime();
	}
}

Sleep.prototype.displayTime = function() {
	if (this.timeout <= 0) {
		clearInterval(this.tid);
		this.timeout = 0;
		this.tid = null;
		this.displayStartStop(false);
		return;
	}
	this.timeout--;
	if ((this.timeout % 60) == 0)
		this.init();
	if (!this.element) this.element = $('sleeptime');
	this.element.textContent = this.string();
}

Sleep.prototype.Count = function (startflag) {
 	var sthis = this;
	if (startflag) {
		var mval = $('s_minutes').value;
		if (mval.substr(0, 1) == "0")
			mval = mval.substr(1);
		var temp = parseInt(mval) * 60;
		temp = temp + parseInt($('s_hours').value) * 3600;
		this.timeout = temp;
		if (!temp) return;
	} else
		this.timeout = 0;
	var sArray = [ 'sleep', this.timeout ];
	callJSONRPC (sArray, function (r2) {
	 	sthis.init();
	});
}

</script>
	 
	<span id = "sleeptime" style = "position: absolute; font-size: 80; top: 106; width: 320; -webkit-box-sizing: border-box; text-align: center; color: white; display: none">&nbsp;</span>

	<div id = "sleepedit" style = "position: absolute; font-size: 32; top: 126; width: 320; -webkit-box-sizing: border-box; padding: 0 35 0 35;">
		<select id="s_hours" name="s_hours" class = "selectItems" title = "[% 'IPENG_HOURS' | string %]"
				style = "float: left; font-size: 32; text-align: right; "
				onChange = "void(0);">
			[% j = 0; WHILE j < 24; %]
			<option id = "s_h[% j %]" value = "[% j %]">[% j %]</option>
			[% j = j + 1; END %]
		</select>
	
		<span style = "font-size: 48; color: white;">&nbsp;:</span>
	
		<select id="s_minutes" name="s_minutes" title = "[% 'MINUTES' | string %]" class = "selectItems" 
				style = "float: right; font-size: 32;"
				onChange = "void(0);">
			[% j = 0; WHILE j < 60; %]
			<option id = "s_m[% j %]" value = "[% IF j < 10; '0'; END; j %]">[% IF j < 10; '0'; END; j %]</option>
			[% IF j < 15; j = j + 1;
			   ELSE; j = j + 5; END;
			END %]
		</select>
	</div>

    <a id = 'sleepstart' class="iButton start" 
	   href="javascript:sleep.Count(true);"	target = "_self"
	   style = "position: absolute; display: block;
	   			top: 210; left: 11;
			    padding: 8 0 0 0;
			    width: 298;
			    height: 48px;
			    text-align: center;
			    font-size: 24;
		        -webkit-box-sizing: border-box;
		">[% 'IPENG_START' | string %]</a>
    <a id = 'sleepstop' class="iButton red" 
		href = "javascript:sleep.Count(false);" target = "_self"
		style = "position: absolute; display: none;
	   			top: 210; left: 11;
		 		padding: 8 0 0 0;
				 width: 298;
				 height: 48px;
				 text-align: center;
				 font-size: 24;
			     -webkit-box-sizing: border-box;
			     color: white;
		">[% 'IPENG_STOP' | string %]</a>

<script>sleep.init();</script>
</div>
